"use client";

import FitInput from "@/app/[language]/note/components/FitInput";
import NoteItems from "@/app/[language]/note/components/NoteItems";
import PositionInput from "@/app/[language]/note/components/PositionInput";
import SrcInput from "@/app/[language]/note/components/SrcInput";
import WantInput from "@/app/[language]/note/components/WantInput";
import useGetNote from "@/app/[language]/note/query/useGetNote";

import { useNoteStore } from "@/state/Stores";
import { formatText } from "@/utilities/Utility";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
import { Button, Col, Row } from "reactstrap";
import { useIntParam, useWant } from "taehui-ts/fe-utilities";

export default observer(() => {
  const {
    setWantAvatar,
    wantInput,
    lastPage,
    setLastPage,
    viewUnit,
    lastWant,
    lastSrc,
  } = useNoteStore();
  const t = useTranslations();

  const { want, setWant } = useWant("/note");
  const { param: src } = useIntParam("src", 0);
  const { param: page, setParam: setPage } = useIntParam("page", 1);

  const {
    data: { highestCount, totalCount, noteCount },
    isFetched: isNoteLoaded,
  } = useGetNote();

  useEffect(() => {
    if ((want !== lastWant || src !== lastSrc) && page > 1) {
      setPage(1);
    }
  }, [lastSrc, lastWant, page, setPage, src, want]);

  useEffect(() => {
    if (isNoteLoaded) {
      setLastPage(Math.max(1, Math.ceil(noteCount / viewUnit)));
    }
  }, [isNoteLoaded, noteCount, setLastPage, viewUnit]);

  useEffect(() => {
    setWantAvatar(src === 1 ? want : "");
  }, [setWantAvatar, src, want]);

  const onWant = () => {
    setWant(wantInput);
  };

  const onClose = () => {
    setWant("");
  };

  return (
    <>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <FitInput />
        </Col>
        <Col className="m-1" xs="auto">
          <SrcInput />
        </Col>
        <Col className="m-1">
          <WantInput />
        </Col>
        <Col className="m-1" xs="auto">
          <Button color="success" onClick={onWant}>
            {t("onWant")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button color="danger" onClick={onClose}>
            {t("onClose")}
          </Button>
        </Col>
      </Row>

      <Row className="g-0">
        <Col className="m-1">
          <NoteItems />
        </Col>
      </Row>

      {lastPage >= 0 && (
        <Row className="justify-content-center g-0">
          <Col className="m-1" xs="auto">
            <PositionInput />
          </Col>
        </Row>
      )}

      {isNoteLoaded && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span>
              {t("highestCountText", {
                highestCount: formatText(highestCount),
              })}
            </span>
            <br />
            <span>
              {t("totalCountText", { totalCount: formatText(totalCount) })}
            </span>
          </Col>
        </Row>
      )}

      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span
            dangerouslySetInnerHTML={{
              __html: t.raw("bannedNoteFile"),
            }}
          />
        </Col>
      </Row>
    </>
  );
});